preferencesgroup > box {
  button.background-preview-button.toggle {
    padding: 0;
    background: none;
    box-shadow: none;
    outline-color: transparent;
    outline-width: 3px;
    outline-offset: $base_padding / 2;
    outline-style: solid;

    &, > background-preview {
      border-radius: $button_radius;
    }

    &:hover {
      outline-color: $hover_color;
    }

    &:active {
      outline-color: $active_color;
    }

    &:checked {
      outline-color: $accent_color;
    }
  }

  .cutout-button {
    background-color: $dialog_bg_color;
  }
  
  button.accent, // GDM Settings
  button.accent-button {
    min-height: 24px;
    min-width: 24px;
    padding: $base_padding / 2;
    border-radius: $circular_radius;
    background: var(--accent-bg-color);
    outline: none;
    background-clip: content-box;
    box-shadow: none;

    &:hover {
      box-shadow: 0 0 0 3px $hover_color;
    }

    &:checked {
      box-shadow: 0 0 0 3px $accent_color;
    }

    &.blue, &.teal, &.green, &.yellow, &.orange, &.red, &.pink, &.purple, &.slate {
      --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
    }

    &.blue {
      --accent-bg-color: var(--accent-blue);
    }

    &.teal {
      --accent-bg-color: var(--accent-teal);
    }

    &.green {
      --accent-bg-color: var(--accent-green);
    }

    &.yellow {
      --accent-bg-color: var(--accent-yellow);
    }

    &.orange {
      --accent-bg-color: var(--accent-orange);
    }

    &.red {
      --accent-bg-color: var(--accent-red);
    }

    &.pink {
      --accent-bg-color: var(--accent-pink);
    }

    &.purple {
      --accent-bg-color: var(--accent-purple);
    }

    &.slate {
      --accent-bg-color: var(--accent-slate);
    }
  }
}